<template>
  <div class="mainapp">
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card>
              <div style="height: 281px">
                <div
                  style="height: 20px; line-height: 20px; margin-bottom: 10px"
                >
                  <img
                    style="height: 30px; vertical-align: middle"
                    src="../../../assets/showImages/dataVivew/titlezs.png"
                    alt=""
                  />
                  <div class="topTitle">发电量</div>
<!--                  <span style="margin-left: 5px">单位：亿千瓦</span>-->
                </div>
                <div>
                  <div class="leftBlock">
                    <div style="">
                      <div>本期</div>
                      <div
                        style="
                          width: 35%;
                          height: 16px;
                          background: #3d77fc;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">35</span>
                    </div>
                    <div style="margin-top: 24px">
                      <div>同期</div>
                      <div
                        style="
                          width: 54%;
                          height: 16px;
                          background: #0fce8b;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">54</span>
                    </div>
                    <div
                      style="
                        <!-- width: 124px; -->
                        height: 40px;
                        line-height: 40px;
                        background: #edf1f9;
                        border-radius: 4px;
                        font-size: 10px;
                        margin-top:38px;
                         text-align:center;
                      "
                    >
                      同比<span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                    </div>
                  </div>
                  <div style="display: inline-block; margin-top: 49px;width:40%">
                    <!-- <div
                      id="myChart"
                      :style="{ width: '100px', height: '100px' }"
                    ></div> -->
                    <div>
                      <el-progress
                        :format="format"
                        :width="120"
                        type="circle"
                        :stroke-width="12"
                        :percentage="45"
                      >
                      </el-progress>
                    </div>
                    <div style="margin-top: 36px; text-align: center">
                      25/120.60
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card>
              <div style="height: 281px">
                <div
                  style="height: 20px; line-height: 20px; margin-bottom: 10px"
                >
                  <img
                    style="height: 30px; vertical-align: middle"
                    src="../../../assets/showImages/dataVivew/titlezs.png"
                    alt=""
                  />
                  <div class="topTitle">上网电量</div>
<!--                  <span style="margin-left: 5px">单位：亿千瓦</span>-->
                </div>
                <div>
                  <div class="leftBlock">
                    <div style="">
                      <div>本期</div>
                      <div
                        style="
                          width: 35%;
                          height: 16px;
                          background: #3d77fc;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">35</span>
                    </div>
                    <div style="margin-top: 24px">
                      <div>同期</div>
                      <div
                        style="
                          width: 54%;
                          height: 16px;
                          background: #0fce8b;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">54</span>
                    </div>
                    <div
                      style="
                        <!-- width: 124px; -->
                        height: 40px;
                        line-height: 40px;
                        background: #edf1f9;
                        border-radius: 4px;
                        font-size: 10px;
                        margin-top:38px;
                         text-align:center;
                      "
                    >
                      同比<span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                    </div>
                  </div>
                  <div style="display: inline-block; margin-top: 49px;width:40%">
                    <!-- <div
                      id="myChart"
                      :style="{ width: '100px', height: '100px' }"
                    ></div> -->
                    <div>
                      <el-progress
                        :format="format"
                        :width="120"
                        type="circle"
                        :stroke-width="12"
                        :percentage="45"
                      >
                      </el-progress>
                    </div>
                    <div style="margin-top: 36px; text-align: center">
                      25/120.60
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card>
              <div style="height: 281px">
                <div
                  style="height: 20px; line-height: 20px; margin-bottom: 10px"
                >
                  <img
                    style="height: 30px; vertical-align: middle"
                    src="../../../assets/showImages/dataVivew/titlezs.png"
                    alt=""
                  />
                  <div class="topTitle">发电收入</div>
<!--                  <span style="margin-left: 5px">单位：亿千瓦</span>-->
                </div>
                <div>
                  <div class="leftBlock">
                    <div style="">
                      <div>本期</div>
                      <div
                        style="
                          width: 20%;
                          height: 16px;
                          background: #3d77fc;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">25.79</span>
                    </div>
                    <div style="margin-top: 24px">
                      <div>同期</div>
                      <div
                        style="
                          width: 30%;
                          height: 16px;
                          background: #0fce8b;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">25.79</span>
                    </div>
                    <div
                      style="
                        <!-- width: 124px; -->
                        height: 40px;
                        line-height: 40px;
                        background: #edf1f9;
                        border-radius: 4px;
                        font-size: 10px;
                        margin-top:38px;
                         text-align:center;
                      "
                    >
                      同比<span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                    </div>
                  </div>
                  <div style="display: inline-block; margin-top: 49px;width:40%">
                    <!-- <div
                      id="myChart"
                      :style="{ width: '100px', height: '100px' }"
                    ></div> -->
                    <div>
                      <el-progress
                        :format="format"
                        :width="120"
                        type="circle"
                        :stroke-width="12"
                        :percentage="25"
                      >
                      </el-progress>
                    </div>
                    <div style="margin-top: 36px; text-align: center">
                      25/120.60
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card>
              <div style="height: 281px">
                <div
                  style="height: 20px; line-height: 20px; margin-bottom: 10px"
                >
                  <img
                    style="height: 30px; vertical-align: middle"
                    src="../../../assets/showImages/dataVivew/titlezs.png"
                    alt=""
                  />
                  <div class="topTitle">发电利润</div>
<!--                  <span style="margin-left: 5px">单位：亿千瓦</span>-->
                </div>
                <div>
                  <div class="leftBlock">
                    <div style="">
                      <div>本期</div>
                      <div
                        style="
                          width: 60%;
                          height: 16px;
                          background: #3d77fc;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">60</span>
                    </div>
                    <div style="margin-top: 24px">
                      <div>同期</div>
                      <div
                        style="
                          width: 30%;
                          height: 16px;
                          background: #0fce8b;
                          border-radius: 2px;
                          display: inline-block;
                          margin-top: 9px;
                        "
                      ></div>
                      <span class="progressNum">30</span>
                    </div>
                    <div
                      style="
                        <!-- width: 124px; -->
                        height: 40px;
                        line-height: 40px;
                        background: #edf1f9;
                        border-radius: 4px;
                        font-size: 10px;
                        margin-top:38px;
                        text-align:center;
                      "
                    >
                      同比<span style="font-weight: bold;
color: #08AE00;">+31.33, +13.31%</span>
                    </div>
                  </div>
                  <div style="display: inline-block; margin-top: 49px;width:40%">
                    <!-- <div
                      id="myChart"
                      :style="{ width: '100px', height: '100px' }"
                    ></div> -->
                    <div>
                      <el-progress
                        :format="format"
                        :width="120"
                        type="circle"
                        :stroke-width="12"
                        :percentage="48"
                      >
                      </el-progress>
                    </div>
                    <div style="margin-top: 36px; text-align: center">
                      25/120.60
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :span="24">
          <el-card>
            <div style="height: 400px">
              <div style="height: 20px; line-height: 20px; margin-bottom: 18px">
                <img
                  style="height: 30px; vertical-align: middle"
                  src="../../../assets/showImages/dataVivew/titlezs.png"
                  alt=""
                />
                <div class="topTitle">项目公司贡献分析</div>
              </div>
              <div style="width: 25%; float: left">
                <div
                  style="
                    font-size: 10px;
                    height:100%;
                  "
                >
                  <div id="lineEcharts" :style="{height: '340px',marginTop:'15px' }"></div>
                </div>
              </div>
              <div style="margin-left: 26%">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <el-card>
                        <div
                          style="
                            font-weight: bold;
                            color: #3a4b6b;
                            margin-bottom: 10px;
                          "
                        >
                          发电量<span></span>
                        </div>
                        <div id="myecharts5" :style="{ height: '250px' }"></div>
                      </el-card>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <el-card>
                      <div
                        style="
                          font-weight: bold;
                          color: #3a4b6b;
                          margin-bottom: 10px;
                        "
                      >
                        上网电量<span></span>
                      </div>
                      <div id="myecharts6" :style="{ height: '250px' }"></div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card>
                      <div
                        style="
                          font-weight: bold;
                          color: #3a4b6b;
                          margin-bottom: 10px;
                        "
                      >
                        发电收入(不含税)<span></span>
                      </div>
                      <div id="myecharts7" :style="{ height: '250px' }"></div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card>
                      <div
                        style="
                          font-weight: bold;
                          color: #3a4b6b;
                          margin-bottom: 10px;
                        "
                      >
                        发电利润<span></span>
                      </div>
                      <div id="myecharts8" :style="{ height: '250px' }"></div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :span="12" style="position: relative">
          <el-card>
            <div style="height: 20px; line-height: 20px; margin-bottom: 10px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">项目公司贡献分析</div>
            </div>
            <div>
              <div style="width: 100%; float: left;margin-right: -230px">
<!--                <el-row>-->
<!--                  <ul-->
<!--                    style="-->
<!--                      display: flex;-->
<!--                      margin-left: 8%;-->
<!--                      position: absolute;-->
<!--                      top: 50px;-->
<!--                    "-->
<!--                  >-->
<!--                    <li-->
<!--                      style="-->
<!--                        width: 23px;-->
<!--                        height: 23px;-->
<!--                        background: #fda73b;-->
<!--                        opacity: 0.5;-->
<!--                        border-radius: 50%;-->
<!--                        flex-direction: row;-->
<!--                        margin-left: 10px;-->
<!--                        text-align: center;-->
<!--                        line-height: 23px;-->
<!--                      "-->
<!--                      v-for="item in dataList"-->
<!--                    >-->
<!--                      {{ item }}-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </el-row>-->
                <div id="myChartButtom1" :style="{ width:'80%',height: '210px' }"></div>
              </div>
            </div>
            <div style="float: right">
              <ul>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" style="position: relative">
          <el-card>
            <div style="height: 20px; line-height: 20px; margin-bottom: 10px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">项目公司贡献分析</div>
            </div>
            <div>
              <div style="width: 100%; float: left;margin-right: -230px">
<!--                <el-row>-->
<!--                  <ul-->
<!--                    style="-->
<!--                      display: flex;-->
<!--                      margin-left: 8%;-->
<!--                      position: absolute;-->
<!--                      top: 50px;-->
<!--                    "-->
<!--                  >-->
<!--                    <li-->
<!--                      style="-->
<!--                        width: 23px;-->
<!--                        height: 23px;-->
<!--                        background: #fda73b;-->
<!--                        opacity: 0.5;-->
<!--                        border-radius: 50%;-->
<!--                        flex-direction: row;-->
<!--                        margin-left: 10px;-->
<!--                        text-align: center;-->
<!--                        line-height: 23px;-->
<!--                      "-->
<!--                      v-for="item in dataList"-->
<!--                    >-->
<!--                      {{ item }}-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </el-row>-->
                <div id="myChartButtom2" :style="{ width:'80%',height: '210px' }"></div>
              </div>
            </div>
            <div style=" float: right">
              <ul>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :span="12" style="position: relative">
          <el-card>
            <div style="height: 20px; line-height: 20px; margin-bottom: 10px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">项目公司贡献分析</div>
            </div>
            <div>
              <div style="width: 100%; float: left;margin-right: -230px">
                <div id="myChartButtom3" :style="{width:'80%', height: '210px' }"></div>
              </div>
            </div>
            <div style="float: right">
              <ul>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" style="position: relative">
          <el-card>
            <div style="height: 20px; line-height: 20px; margin-bottom: 10px">
              <img
                style="height: 30px; vertical-align: middle"
                src="../../../assets/showImages/dataVivew/titlezs.png"
                alt=""
              />
              <div class="topTitle">项目公司贡献分析</div>
            </div>
            <div>
              <div style="width:100%;float: left;margin-right: -230px">
<!--                <el-row>-->
<!--                  <ul-->
<!--                    style="-->
<!--                      display: flex;-->
<!--                      margin-left: 8%;-->
<!--                      position: absolute;-->
<!--                      top: 50px;-->
<!--                    "-->
<!--                  >-->
<!--                    <li-->
<!--                      style="-->
<!--                        width: 23px;-->
<!--                        height: 23px;-->
<!--                        background: #fda73b;-->
<!--                        opacity: 0.5;-->
<!--                        border-radius: 50%;-->
<!--                        flex-direction: row;-->
<!--                        margin-left: 10px;-->
<!--                        text-align: center;-->
<!--                        line-height: 23px;-->
<!--                      "-->
<!--                      v-for="item in dataList"-->
<!--                    >-->
<!--                      {{ item }}-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </el-row>-->
                <div id="myChartButtom4" :style="{ width:'80%',height: '210px',}"></div>
              </div>
            </div>
            <div style="float: right">
              <ul>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
                <li
                  style="
                    width: 213px;
                    height: 40px;
                    background: #edf1f9;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    line-height: 40px;
                    padding-left: 8px;
                  "
                >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                    "
                    >Q1</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #3d77fc;
                      padding-left: 5px;
                    "
                    >11.33</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #3a4b6b;
                      padding-left: 10px;
                    "
                    >同比</span
                  >
                  <span
                    style="
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #08ae00;
                      padding-left: 5px;
                    "
                    >+11.33</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [12, 22, 33, 44, 55, 66, 77, 88, 99, 14, 16, 23],
    };
  },
  mounted() {
    this.myecharts4();
    this.myecharts5();
    this.myecharts6();
    this.myecharts7();
    this.myecharts8();
    this.myChartButtom1();
    this.myChartButtom2();
    this.myChartButtom3();
    this.myChartButtom4();
  },
  methods: {
    format(percentage) {
      return `${percentage}%` + "\n计划完成率";
    },
    myecharts4() {
      var myecharts4 = this.$echarts.init(
        document.getElementById("lineEcharts")
      );
      let option = {
        color:['#0FCE8B','#33B4FF','#3D77FC',],
        title: {
          text: "装机容量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
           x:'right',
           data:['风电类','新能源','火电类']
        },
        grid: {
          top:'50px',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          show:false,
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {

          type: "category",
           axisTick: {
                show: false
            },
             axisLine: {
                show: false
            },
            axisLabel:{
              color:'#3A4B6B',
              fontSize:14,
            },
          data: ["巴基斯坦卡西姆项目", "老挝南欧江一期项目", "印尼明古鲁项目", "柬埔寨甘再项目", "尼泊尔上马相迪项目", "老挝南5项目","澳大利亚牧牛山项目"],
        },
        series:[
          {
          name:'风电类',
          type:'bar',
          stack:'类型',
          barWidth : 14,//柱图宽度
          barGap: 5,
          data:[20000,0,50000,0,100000,0,0],
          itemStyle:{
            normal:{color:'#0FCE8B'}
          }
          },
          {
          name:'新能源',
          type:'bar',
          stack:'类型',
           barWidth : 12,//柱图宽度
          data:[0,40000,0,80000,0,120000,0],
           itemStyle:{
            normal:{color:'#33B4FF'}
          }
          },
          {
          name:'火电类',
          type:'bar',
          stack:'类型',
          barWidth : 12,//柱图宽度
          data:[0,0,0,0,0,0,90000],
          itemStyle:{
            normal:{color:'#3D77FC'}
          }
          },
        ]
      };
      myecharts4.setOption(option);
    },
    myecharts5() {
      var myecharts5 = this.$echarts.init(
        document.getElementById("myecharts5")
      );
      let option = {
        grid: {
          top: 0,
          bottom: 0,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            selectedMode: false,
            radius: [0, "90%"],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
            color:['#0FCE8B','#3D77FC','#33B4FF',],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 1730,name: '60%',}, { value: 775,name: '25%', }, { value: 679,name: '15%', }],
          },
          {
            // name: 'Access From',
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "99%"],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                color: '#9AE3FF',
                borderWidth: 2
              },
            // labelLine: {
            //   length: 30
            // },
            label: {
              position: "inner",
            },
            data: [
              { value: 1048 },
              { value: 335 },
              { value: 310 },
              { value: 251 },
              { value: 234 },
              { value: 147 },
              { value: 135 },
              { value: 102 },
            ],
          },
        ],
      };
      myecharts5.setOption(option);
    },
    myecharts6() {
      var myecharts5 = this.$echarts.init(
        document.getElementById("myecharts6")
      );
        let option = {
        grid: {
          top: 0,
          bottom: 0,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            selectedMode: false,
            radius: [0, "90%"],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
            color:['#0FCE8B','#3D77FC','#33B4FF',],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 1693,name: '66%',}, { value: 485,name: '19%', }, { value: 384,name: '15%', }],
          },
          {
            // name: 'Access From',
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "99%"],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                color: '#9AE3FF',
                borderWidth: 2
              },
            // labelLine: {
            //   length: 30
            // },
            label: {
              position: "inner",
            },
            data: [
              { value: 1048 },
              { value: 335 },
              { value: 310 },
              { value: 251 },
              { value: 234 },
              { value: 147 },
              { value: 135 },
              { value: 102 },
            ],
          },
        ],
      };
      myecharts5.setOption(option);
    },
    myecharts7() {
      var myecharts5 = this.$echarts.init(
        document.getElementById("myecharts7")
      );
        let option = {
        grid: {
          top: 0,
          bottom: 0,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            selectedMode: false,
            radius: [0, "90%"],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
            color:['#0FCE8B','#3D77FC','#33B4FF',],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 1048,name: '41%',}, { value: 645,name: '25%', }, { value: 869,name: '34%', }],
          },
          {
            // name: 'Access From',
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "99%"],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                color: '#9AE3FF',
                borderWidth: 2
              },
            // labelLine: {
            //   length: 30
            // },
            label: {
              position: "inner",
            },
            data: [
              { value: 1048 },
              { value: 335 },
              { value: 310 },
              { value: 251 },
              { value: 234 },
              { value: 147 },
              { value: 135 },
              { value: 102 },
            ],
          },
        ],
      };
      myecharts5.setOption(option);
    },
    myecharts8() {
      var myecharts5 = this.$echarts.init(
        document.getElementById("myecharts8")
      );
        let option = {
        grid: {
          top: 0,
          bottom: 0,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            selectedMode: false,
            radius: [0, "90%"],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
            color:['#0FCE8B','#3D77FC','#33B4FF',],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 645,name: '25%',}, { value:869 ,name: '34%', }, { value: 1048,name: '41%', }],
          },
          {
            // name: 'Access From',
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "99%"],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                color: '#9AE3FF',
                borderWidth: 2
              },
            // labelLine: {
            //   length: 30
            // },
            label: {
              position: "inner",
            },
            data: [
              { value: 1048 },
              { value: 335 },
              { value: 310 },
              { value: 251 },
              { value: 234 },
              { value: 147 },
              { value: 135 },
              { value: 102 },
            ],
          },
        ],
      };
      myecharts5.setOption(option);
    },
    myChartButtom1() {
      var option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 40,
          bottom: 20,
        },
        legend: {
          x: "left",
          data:[{
            name:'同期'
          },{
            name:'本期'
          },{
            name:'同比',
          },{
            name:'计划完成率',
          }
          ]
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval:0,
              textStyle: {
                color: "#3A4B6B",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: "#3D77FC",
                /*信息显示方式*/
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
          {
            name: "本期",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#33B4FF",
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            type: "bar",
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
          {
            name: "同比",
            type: "line",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                 color:'#0FCE8B',
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("myChartButtom1")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myChartButtom2() {
      var option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 40,
          bottom: 20,
        },
        legend: {
          x: "left",
          data: ["同期", "本期", "同比"],
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval:0,
              textStyle: {
                color: "#3A4B6B",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: "#3D77FC",
                /*信息显示方式*/
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
          {
            name: "本期",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#33B4FF",
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            type: "bar",
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
          },
          {
            name: "同比",
            type: "line",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                 color:'#0FCE8B',
                //  label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("myChartButtom2")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myChartButtom3() {
      var option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 40,
          bottom: 20,
        },
        legend: {
          x: "left",
          data: ["同期", "本期", "同比"],
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
               interval:0,
              textStyle: {
                color: "#3A4B6B",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            /*itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#fe6262'},
                                            {offset: 0.5, color: '#fe4141'},
                                            {offset: 1, color: '#fe1818'}
                                        ]
                                    ),
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#fe6262'},
                                            {offset: 0.5, color: '#fe4141'},
                                            {offset: 1, color: '#fe1818'}
                                        ]
                                    )
                                }
                            },*/

            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: "#3D77FC",
                /*信息显示方式*/
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
          {
            name: "本期",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#33B4FF",
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            type: "bar",
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
          },
          {
            name: "同比",
            type: "line",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                 color:'#0FCE8B',
                //  label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("myChartButtom3")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myChartButtom4() {
      var option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 40,
          bottom: 20,
        },
        legend: {
          x: "left",
          data: ["同期", "本期", "同比"],
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval:0,
              textStyle: {
                color: "#3A4B6B",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            /*itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#fe6262'},
                                            {offset: 0.5, color: '#fe4141'},
                                            {offset: 1, color: '#fe1818'}
                                        ]
                                    ),
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#fe6262'},
                                            {offset: 0.5, color: '#fe4141'},
                                            {offset: 1, color: '#fe1818'}
                                        ]
                                    )
                                }
                            },*/

            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: "#3D77FC",
                /*信息显示方式*/
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
          {
            name: "本期",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#33B4FF",
                // label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            type: "bar",
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
          },
          {
            name: "同比",
            type: "line",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                 color:'#0FCE8B',
                //  label: {
                //   show: true,
                //   position: "top",
                //   formatter: "{c}",
                // },
              },
            },
            data: [50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("myChartButtom4")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.mainapp {
  min-height: calc(100vh - 84px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: url("../../../assets/showImages/dataVivew/backdrop.png") 0 0
    no-repeat;
  background-size:cover;
}
::v-deep .el-progress__text {
  white-space: pre;
  color: #3d77fc;
}
.titleProgress {
  display: inline-block;
  width: 160px;
}
.progressNum {
  font-weight: bold;
  color: #3a4b6b;
  margin-left: 8px;
  font-size: 16px;
}
.leftBlock {
  float: left;
  margin-right: 5%;
  margin-top: 40px;
  width: 55%;
}
.topTitle {
  display: inline-block;
  font-size: 28px;
  font-weight: 400;
  color: #3a4b6b;
  vertical-align: middle;
}
</style>
